<template>
  <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
    <el-menu :default-active="selectIndex" @select="getIndex">
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-user-solid"></i>员工信息
        </template>
        <el-menu-item index="1-1">查看</el-menu-item>
        <el-menu-item index="1-2">修改</el-menu-item>
        <el-menu-item index="1-3">添加</el-menu-item>
      </el-submenu>
      <el-submenu index="2">
        <template slot="title">
          <i class="el-icon-money"></i>员工月薪
        </template>
        <el-menu-item index="2-1">查看</el-menu-item>
        <el-menu-item index="2-2">修改</el-menu-item>
        <el-menu-item index="2-3">添加</el-menu-item>
      </el-submenu>
    </el-menu>
  </el-aside>
</template>

<script>
export default {
  data() {
    return {
      selectIndex: "1-1"
    };
  },
  methods: {
    getIndex: function(index) {
      var _this = this;
      _this.selectIndex = index;
      _this.$emit("asideIndexChanged", _this.selectIndex);
    }
  }
};
</script>

<style>
</style>